<template>
  <div class="questionnaire-form">
    <div v-if="questions && questions.length > 0" class="questions-list">
      <div 
        v-for="(question, index) in questions" 
        :key="index" 
        class="question-item"
      >
        <div class="question-header">
          <span class="question-index">{{ index + 1 }}</span>
          <span class="question-text">{{ question.questionText }}</span>
          <span v-if="question.isRequired" class="required-mark">*</span>
        </div>

        <!-- 单选题 -->
        <div v-if="question.questionType === 'single'" class="question-options">
          <el-radio-group v-model="formAnswers[index]" @change="handleAnswerChange(index)">
            <div v-for="(option, optionIndex) in question.options" :key="optionIndex" class="option-item">
              <el-radio :label="option">{{ option }}</el-radio>
            </div>
          </el-radio-group>
        </div>

        <!-- 多选题 -->
        <div v-else-if="question.questionType === 'multiple'" class="question-options">
          <el-checkbox-group v-model="formAnswers[index]" @change="handleAnswerChange(index)">
            <div v-for="(option, optionIndex) in question.options" :key="optionIndex" class="option-item">
              <el-checkbox :label="option">{{ option }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>

        <!-- 文本题 -->
        <div v-else-if="question.questionType === 'text'" class="question-options">
          <el-input
            v-model="formAnswers[index]"
            type="textarea"
            :rows="3"
            placeholder="请输入您的回答"
            @blur="handleAnswerChange(index)"
          />
        </div>
      </div>
    </div>

    <div v-else class="empty-questions">
      <el-empty description="暂无问卷题目" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps({
  questions: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Array,
    default: () => []
  },
  readOnly: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'answer-change'])

// 表单答案
const formAnswers = ref([])

// 初始化表单答案
watch(() => props.questions, (newQuestions) => {
  if (newQuestions && newQuestions.length > 0) {
    formAnswers.value = initAnswers(newQuestions)
  }
}, { immediate: true })

// 同步外部传入的值
watch(() => props.modelValue, (newValue) => {
  if (newValue && newValue.length > 0) {
    formAnswers.value = [...newValue]
  }
}, { immediate: true })

// 初始化答案数组
const initAnswers = (questions) => {
  return questions.map(q => {
    if (q.questionType === 'multiple') {
      return []
    }
    return null
  })
}

// 处理答案变化
const handleAnswerChange = (index) => {
  emit('update:modelValue', [...formAnswers.value])
  emit('answer-change', {
    index,
    value: formAnswers.value[index],
    questionType: props.questions[index].questionType
  })
}
</script>

<style scoped>
.questionnaire-form {
  padding: 10px 0;
}

.questions-list {
  margin: 20px 0;
}

.question-item {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.question-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.question-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
}

.question-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.required-mark {
  color: #f56c6c;
  margin-left: 4px;
}

.question-options {
  padding-left: 32px;
}

.option-item {
  margin-bottom: 8px;
}

.empty-questions {
  text-align: center;
  padding: 30px 0;
}
</style> 